import { BUS_THEME, BusDetail } from '@/apis/bus';
import Title from '@/assets/waiting-1.png';
import Desc from '@/assets/waiting-2.png';
import ButtomStart from '@/assets/waiting-3.png';
import Bg from '@/assets/wating-bg.jpg';
import BusNike from '@/components/Bus/Nike';

import BusZhuDi from '@/components/Bus/Zhudi';
import { useMemo } from 'react';
import { history, useQuery, useSearchParams } from 'umi';

import FixedButtons from '@/components/FixedButtons';
import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';
import TweenOne from 'rc-tween-one';

export default function Page() {
  const [searchParams] = useSearchParams();
  const busId = searchParams?.get('busId');

  // ?车队信息
  const { data: bus } = useQuery(
    ['bus:detail'],
    () => BusDetail({ id: busId! }),
    {
      enabled: !!busId,
      onSuccess: function () {},
    },
  );

  // ?拿到自己的信息
  const self = useMemo(() => bus?.passengers?.[0], [bus]);

  return (
    <>
      <FixedButtons />
      <XyzTransitionGroup
        appear
        appearVisible
        xyz="fade up-2 appear-stagger"
        style={{
          backgroundImage: `url(${Bg})`,
        }}
        className="  min-h-screen relative overflow-hidden bg-cover pt-[180px]"
      >
        {/* title */}
        <h1
          className="w-[430px] h-[152px] bg-cover  mx-auto"
          style={{
            backgroundImage: `url(${Title})`,
          }}
        ></h1>

        {/* bus */}
        <div className=" relative mt-12" xyz="fade">
          <TweenOne
            animation={{
              type: 'from',
              x: window.innerWidth + 500,
              duration: 3000,
            }}
            className="busContainer w-[1560px] relative -left-[410px] top-0"
          >
            {bus?.theme === BUS_THEME.NIKE && (
              <BusNike selfAvatar={self?.head} readonly readonlyFriend />
            )}
            {bus?.theme === BUS_THEME.ZHUDI && (
              <BusZhuDi selfAvatar={self?.head} readonly readonlyFriend />
            )}
          </TweenOne>
        </div>

        <b
          className="w-[408px] h-[38px] bg-cover block mx-auto mt-12"
          style={{
            backgroundImage: `url(${Desc})`,
          }}
        ></b>

        <button
          onClick={() => history.push(`/render?busId=${busId}`)}
          className="w-[472px] h-[90px] bg-cover active:scale-95 mx-auto mt-4 block"
          style={{
            backgroundImage: `url(${ButtomStart})`,
            backgroundSize: '100% 100%',
          }}
        ></button>
      </XyzTransitionGroup>
    </>
  );
}
